<div class="MaterialGroup">
    <el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  class="dialogStyleBase" :title="(editType=='add'?'添加':'修改')+'分组'" width="500px" append-to-body
        :visible.sync="boxVisible">
        <el-form ref="editForm" :model="form" label-width="100px" label-position="left">
            <el-form-item label="分组名称" prop="name">
                <el-input v-model="form.name" maxlength="20" show-word-limit></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer">
            <el-button @click="hideBox()">取 消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
    </el-dialog>
    <div class="main">
        <div v-for="(item,index) in list" :class="'li ' +(item.id==groupId)" @click="change(item.id)">
            {{item.name}}({{item.albumCount}})</div>
    </div>

    <div class="footer">
        <div class="but" @click="showBox('add')">
            <el-tooltip class="item" effect="dark" content="创建分组" placement="top">
                <i class="el-icon-circle-plus-outline"></i>
            </el-tooltip>
        </div>
        <div :class="'but '+!isDefault" @click="showBox('update')">
            <el-tooltip class="item" effect="dark" :content="isDefault?'默认分组不可编辑':'编辑分组'" placement="top">
                <i class="el-icon-edit"></i>
            </el-tooltip>
        </div>
        <div  :class="'but '+!isDefault" @click="del()">
            <el-tooltip class="item" effect="dark" :content="isDefault?'默认分组不可删除':'删除分组'" placement="top">
                <i class="el-icon-delete"></i>
            </el-tooltip>
        </div>
    </div>
</div>